<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item><nuxt-link to="/meal/manage">餐券管理</nuxt-link></a-breadcrumb-item>
        <a-breadcrumb-item>支付流水</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="订餐人" v-bind="formItemLayout">
                <a-input v-model="queryParam.createdByName" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="订单日期" v-bind="formItemLayout">
                <a-range-picker v-model="dateSection" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="8" :xs="0">
              <div class="btn-container">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button @click="reset">重置</a-button>
                <a-button type="primary" @click="clickExport">导出报表</a-button>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="订单编号" v-bind="formItemLayout">
                <a-input v-model="queryParam.orderNo" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :lg="0" :md="12" :sm="24">
              <div class="btn-container">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button @click="reset">重置</a-button>
                <a-button type="primary" @click="clickExport">导出报表</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div>
        <s-table
          ref="payTable"
          bordered
          class="s-table"
          row-key="id"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :show-pagination="false"
          :columns="columns"
          :data="loadData"
          :alert="false"
        />
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="queryParam.pageSize"
            :show-total="total => `共 ${total} 条记录 第 ${queryParam.pageNum} / ${Math.ceil(total / queryParam.pageSize)} 页`"
            :current="queryParam.pageNum"
            :total="changeCount"
            hide-on-single-page
            show-quick-jumper
            @change="handlePage"
          />
        </div>
      </div>

      <ExportModal
        items="订餐日期"
        :show="showExport"
        :sending="sending"
        :default-params="exportParam"
        @ok="handleExport"
        @cancel="showExport = false"
        @show="bool => (showExport = bool)"
      />

    </a-card>
  </page-view>
</template>

<script>
import { STable, ExportModal, PageView } from '@/components'

export default {
  name: 'Pay',
  components: { PageView, STable, ExportModal },
  inject: ['formItemLayout'],

  data () {
    return {
      showExport: false,
      dateSection: [],
      exportParam: { min: undefined, max: undefined },

      queryParam: {
        createdByName: '',
        orderNo: '',
        minCreatedTime: '',
        maxCreatedTime: '',
        pageSize: 10,
        pageNum: 1
      },
      changeCount: 0,
      sending: false,
      // 表头
      columns: [
        { title: '订单日期', align: 'center', dataIndex: 'orderTime', customCell: record => Object.assign(record, { orderTime: record.createdTime ? this.$moment(record.createdTime).format('YYYY.MM.DD') : '无' }) },
        { title: '订单编号', align: 'center', dataIndex: 'orderNo' },
        { title: '支付流水号', align: 'center', dataIndex: 'payNo', customCell: record => !record.payNo && Object.assign(record, { payNo: '无' }) },
        { title: '订餐人', align: 'center', dataIndex: 'createdByName' },
        { title: '订单金额(元)', align: 'center', dataIndex: 'amount' },
        { title: '餐券数量', align: 'center', dataIndex: 'qty' },
        { title: '支付方式', align: 'center', dataIndex: 'payType', customCell: record => !record.payType && Object.assign(record, { payType: '未知' }) }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const { queryParam, $axios, $notification, $get } = this
        const that = this
        const params = {}
        for (const key in queryParam) {
          const item = queryParam[key]
          if (item) params[key] = item
        }

        this.sending = true
        return $axios.post('api/mealOrder/query', params).then(res => {
          that.sending = false
          if (res.data.code === '000000') {
            that.changeCount = res.data.data.count // 设置总数
            return { data: $get(res, 'data.data.dataList', []).map(i => Object.assign(i, { qty: i.personQty })) }
          }
        }).catch(e => {
          $notification.error({ message: '连接服务器超时' })
          that.sending = false
        })
      }
    }
  },

  watch: {
    $route (t) {
      if (t.name === 'meal-pay') this.refresh()
    }
  },

  methods: {
    handleSearch () {
      const { queryParam, dateSection, $get } = this
      const dates = { minCreatedTime: undefined, maxCreatedTime: undefined }
      if ($get(dateSection, 'length') === 2 && dateSection[0] && dateSection[1]) {
        dates.minCreatedTime = dateSection[0].format('YYYY-MM-DD')
        dates.maxCreatedTime = dateSection[1].format('YYYY-MM-DD')
      }
      Object.assign(queryParam, dates)
      this.$handlePage(1)
    },

    handlePage (p) {
      this.$handlePage(p)
    },

    refresh () {
      this.$refs.payTable.refresh()
    },

    reset () {
      const { queryParam } = this
      for (const key in queryParam) {
        if (key === 'pageNum') queryParam[key] = 1
        else if (key === 'pageSize') queryParam[key] = 10
        else queryParam[key] = ''
      }
      this.dateSection = []
      this.refresh()
    },

    clickExport () {
      const { minCreatedTime, maxCreatedTime } = this.queryParam
      const params = {}
      if (minCreatedTime && maxCreatedTime) Object.assign(params, { min: minCreatedTime, max: maxCreatedTime })
      this.exportParam = params
      this.showExport = true
    },

    async handleExport (params) {
      const { exportParam } = this
      const { min, max } = params
      Object.assign(exportParam, { minCreatedTime: min, maxCreatedTime: max })
      const param = { ...exportParam }
      delete param.min
      delete param.max
      if (min) params.minCreatedTime = min
      if (max) params.maxCreatedTime = max
      const str = (min && max) ? `${min}至${max}` : '全部时间'
      const bool = await this.$exportFile({ url: 'api/mealOrder/export', param, fileName: `支付流水_${str}` })
      if (bool) this.showExport = false
    }
  }
}
</script>
